Angular Material এর <mat-table> কম্পোনেন্টটি ডাটা টেবিল তৈরি করার জন্য ব্যবহার করা হয়। এর মাধ্যমে আপনি সুন্দর এবং রেসপন্সিভ টেবিল তৈরি করতে পারেন। ডাটা ফিল্টারিং একটি সাধারণ ফিচার, যা টেবিলের মধ্যে একটি নির্দিষ্ট শর্তের ভিত্তিতে ডাটা সিলেক্ট করতে সহায়ক।

এই গাইডে, আমরা দেখব কিভাবে Angular Material এর টেবিলে ডাটা ফিল্টারিং ইমপ্লিমেন্ট করা যায়।

প্রাথমিক প্রস্তুতি

প্রথমে, Angular Material এর প্রয়োজনীয় মডিউলগুলো ইমপোর্ট করতে হবে।

১. মডিউল ইমপোর্ট করা

MatTableModule এবং MatInputModule ইমপোর্ট করুন:

import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatTableModule,
    MatInputModule,
    MatIconModule
  ]
})
export class AppModule { }

ডাটা ফিল্টারিং ইমপ্লিমেন্ট করা

২. HTML টেমপ্লেট

এখানে আমরা একটি mat-table তৈরি করব এবং একটি input field যোগ করব, যা ব্যবহারকারীর ইনপুট অনুযায়ী টেবিলের ডাটা ফিল্টার করবে।

<div>
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event)" placeholder="Filter">
    <mat-icon matSuffix>search</mat-icon>
  </mat-form-field>
</div>

<table mat-table [dataSource]="dataSource">

  <!-- Column Definitions -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef> Age </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <ng-container matColumnDef="address">
    <th mat-header-cell *matHeaderCellDef> Address </th>
    <td mat-cell *matCellDef="let element"> {{element.address}} </td>
  </ng-container>

  <!-- Header and Row Definitions -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

এখানে, matInput ব্যবহার করে আমরা একটি ইনপুট ফিল্ড তৈরি করেছি। keyup ইভেন্টের মাধ্যমে applyFilter() ফাংশন কল হবে, যা ব্যবহারকারীর ইনপুট অনুযায়ী ডাটা ফিল্টার করবে।

৩. TypeScript কোড

এখন, applyFilter() ফাংশনটি তৈরি করতে হবে, যা টেবিলের ডাটা ফিল্টার করবে। আমরা MatTableDataSource ব্যবহার করব, যা Angular Material টেবিলের ডাটা পরিচালনা করে।

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  displayedColumns: string[] = ['name', 'age', 'address'];
  dataSource: MatTableDataSource<any>;

  data = [
    { name: 'John', age: 25, address: 'New York' },
    { name: 'Jane', age: 30, address: 'Los Angeles' },
    { name: 'Jim', age: 35, address: 'Chicago' },
    { name: 'Jake', age: 40, address: 'San Francisco' },
    { name: 'Jill', age: 45, address: 'Houston' }
  ];

  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.data);
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

এখানে:

• MatTableDataSource: এই ক্লাসটি Angular Material টেবিলের জন্য ডাটা সাপ্লাই এবং ফিল্টারিং পরিচালনা করে।
• applyFilter(): এই ফাংশনটি ইনপুট ফিল্ডে লিখিত ভ্যালুর উপর ভিত্তি করে টেবিলের ডাটা ফিল্টার করে।
• this.dataSource.filter: এটি ডাটা ফিল্টার করার জন্য ব্যবহৃত হয়। ফিল্টার ভ্যালু trim() করে, যা অতিরিক্ত স্পেস সরিয়ে ফেলে এবং toLowerCase() ব্যবহার করে ইনপুটকে ছোট অক্ষরে রূপান্তরিত করে, যাতে ফিল্টারিং কেস সেনসিটিভ না হয়।

৪. স্টাইলিং

Angular Material টেবিলের জন্য সাধারণ স্টাইলিং এর প্রয়োজন হতে পারে, যেমন টেবিলের আউটলাইন, শ্যাডো ইত্যাদি। আপনি CSS ফাইল ব্যবহার করে এটিকে কাস্টমাইজ করতে পারেন।

table {
  width: 100%;
}

mat-form-field {
  width: 100%;
  margin-bottom: 20px;
}

এখানে, mat-form-field এর জন্য কিছু মার্জিন এবং টেবিলের প্রস্থ 100% করা হয়েছে।

৫. ফিল্টার কাস্টমাইজেশন

ফিল্টারটি নির্দিষ্ট কলামগুলোর উপরেও নির্ধারণ করতে পারেন। যেমন, যদি আপনি শুধু নামের কলাম বা শুধুমাত্র বয়সের কলাম ফিল্টার করতে চান, তাহলে আপনি MatTableDataSource এর filterPredicate প্রপার্টি কাস্টমাইজ করতে পারেন।

ngOnInit() {
  this.dataSource = new MatTableDataSource(this.data);

  this.dataSource.filterPredicate = (data: any, filter: string) => {
    return data.name.toLowerCase().includes(filter) || data.age.toString().includes(filter);
  };
}

এখানে, ফিল্টার প্রেডিকেট কাস্টমাইজ করা হয়েছে যাতে name এবং age কলামের ওপর ফিল্টার প্রয়োগ করা যায়।

Angular Material টেবিলের ডাটা ফিল্টারিং একটি গুরুত্বপূর্ণ ফিচার, যা ব্যবহারকারীদের দ্রুত এবং সহজে টেবিলের মধ্যে খোঁজা বা নির্দিষ্ট তথ্য পাওয়া সহজ করে তোলে। MatTableDataSource এবং filter প্রপার্টি ব্যবহার করে আপনি টেবিলের ডাটা ফিল্টার করতে পারেন এবং applyFilter() ফাংশনের মাধ্যমে ফিল্টারিংয়ের কার্যকলাপ পরিচালনা করতে পারেন। আপনি চাইলে কাস্টম ফিল্টার প্রেডিকেট ব্যবহার করে নির্দিষ্ট কলামের উপর ফিল্টারিংও ইমপ্লিমেন্ট করতে পারেন।